<template>
  <!-- 登录组件开始 -->
  <div class="bg-grey pt-80 pb-50 wow fadeInUp animated">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-6 col-md-10">
          <div
            class="login_wrap widget-taber-content p-30 bg-white border-radius-10"
          >
            <div class="padding_eight_all bg-white">
              <div class="heading_s1 text-center">
                <h3 class="mb-30 font-weight-900">登录</h3>
              </div>
              <form method="post">
                <div class="form-group">
                  <input
                    type="email"
                    name="username"
                    v-validate="{
                      required: true,
                      regex: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
                    }"
                    v-model="username"
                    required="true"
                    :class="{ 'is-invalid': errorBags.has('username') }"
                    class="form-control"
                    placeholder="请输入邮箱"
                  />
                  <div class="invalid-feedback">请输入有效的邮箱地址。</div>
                </div>
                <div class="form-group">
                  <input
                    class="form-control"
                    v-model="password"
                    v-validate="{ required: true, regex: /.{6,}/ }"
                    :class="{ 'is-invalid': errorBags.has('password') }"
                    type="password"
                    name="password"
                    placeholder="请输入密码"
                  />
                  <div class="invalid-feedback">密码必须大于6位数。</div>
                </div>
                <div class="form-group">
                  <router-link to="/updatePassword" class="float-right" style="margin-bottom: 0.5rem"
                    >忘记密码?</router-link
                  >
                </div>
                <div class="form-group">
                  <button
                    type="button"
                    class="button button-contactForm btn-block"
                    @click="login"
                  >
                    登录
                  </button>
                </div>
              </form>
              <div class="divider-text-center mt-15 mb-15">
                <span> or</span>
              </div>
              <ul class="btn-login list_none text-center mb-15">
                <li>
                  <a href="#" @click="wLogin" class="btn btn-facebook"
                    ><svg
                      t="1693495597515"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4037"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M664.084 376.052c9.874 0 19.655 0.707 29.358 1.757-26.36-119.849-157.596-208.904-307.36-208.904-167.452 0-304.629 111.461-304.629 252.993 0 81.721 45.637 148.792 121.914 200.826l-30.47 89.458 106.479-52.133c38.128 7.393 68.674 14.938 106.708 14.938 9.569 0 19.063-0.441 28.459-1.163-5.995-19.884-9.396-40.731-9.396-62.314-0.039-129.954 114.253-235.458 258.937-235.458z m-163.788-80.651c22.942 0 38.108 14.729 38.108 37.136 0 22.292-15.203 37.231-38.108 37.231-22.808 0-45.75-14.939-45.75-37.231 0-22.369 22.942-37.136 45.75-37.136z m-213.222 74.368c-22.83 0-45.905-14.94-45.905-37.231 0-22.369 23.039-37.137 45.905-37.137 22.827 0 38.034 14.729 38.034 37.137 0 22.291-15.167 37.231-38.034 37.231z m655.064 238.15c0-118.895-121.874-215.857-258.781-215.857-144.952 0-259.106 96.925-259.106 215.857 0 119.127 114.156 215.856 259.106 215.856 30.336 0 60.939-7.465 91.405-14.933l83.536 44.662-22.904-74.332c61.187-44.757 106.744-104.185 106.744-171.253zM599.344 570.69c-15.168 0-30.45-14.732-30.45-29.763 0-14.807 15.284-29.708 30.452-29.708 23.034 0 38.128 14.939 38.128 29.708 0.033 15.031-15.055 29.763-38.13 29.763z m167.606 0c-15.09 0-30.26-14.732-30.26-29.763 0-14.807 15.204-29.708 30.26-29.708 22.809 0 38.11 14.939 38.11 29.708 0.001 15.031-15.301 29.763-38.11 29.763z"
                        fill="#00C80A"
                        p-id="4038"
                      ></path></svg
                    >微信</a
                  >
                </li>
                <li>
                  <a href="#" @click="qLogin" class="btn btn-google"
                    ><svg
                      t="1693495738511"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="7164"
                      width="17"
                      height="17"
                    >
                      <path
                        d="M619.486 921.312c-40.947 0-76.776 0-102.368 5.118-30.71-5.118-66.539-5.118-107.486-5.118-112.605 0-214.973 46.066-214.973 76.776s87.013 25.592 199.618 25.592c46.065 0 87.013-5.118 122.841-15.355 35.83 5.118 76.776 10.237 117.724 10.237 112.604 0 199.617 5.118 199.617-25.592s-102.368-71.658-214.973-71.658z"
                        fill="#EFAB1B"
                        p-id="7165"
                      ></path>
                      <path
                        d="M906.117 609.09c-20.474-56.303-46.066-117.724-71.658-174.026v-40.947C834.46 174.026 721.854 0 512 0S189.54 174.026 189.54 394.117v40.947c-25.591 56.302-51.183 117.723-71.657 174.026-46.065 122.841-46.065 230.328-30.71 240.564 10.237 5.119 51.184-35.828 92.131-102.368C204.896 900.838 312.382 1023.68 512 1023.68s307.104-117.723 332.696-281.512c35.829 66.54 76.776 107.486 87.013 102.368 20.473-5.118 15.355-117.723-25.592-235.446z"
                        fill="#040000"
                        p-id="7166"
                      ></path>
                      <path
                        d="M430.106 127.96c-30.71 0-56.303 35.829-56.303 81.894 0 46.066 25.592 81.895 56.303 81.895 30.71 0 56.302-35.829 56.302-81.895 0-46.065-25.592-81.894-56.302-81.894z m174.025 0c-30.71 0-56.302 35.829-56.302 76.776 0 46.066 25.592 81.894 56.302 81.894s56.303-35.828 56.303-76.776c0-46.065-25.592-81.894-56.303-81.894z m117.723 358.288c-61.42 10.237-133.078 15.355-204.736 15.355s-143.315-5.118-204.736-15.355c-40.947 51.184-46.065 127.96-46.065 209.854 0 153.552 87.013 281.512 250.801 281.512S767.92 849.654 767.92 696.102c0-81.894-5.118-158.67-46.066-209.854z"
                        fill="#FFFFFF"
                        p-id="7167"
                      ></path>
                      <path
                        d="M517.118 317.34c-107.486 0-199.617 20.474-199.617 40.948 0 15.355 117.723 66.54 199.617 66.54s199.618-51.185 199.618-66.54c-5.118-20.474-92.131-40.947-199.618-40.947z"
                        fill="#EFAB1B"
                        p-id="7168"
                      ></path>
                      <path
                        d="M829.34 429.946c-81.894 25.592-194.498 40.947-317.34 40.947-127.96 0-240.565-15.355-317.34-40.947-15.356 35.828-30.711 76.776-46.066 112.604 51.184 15.356 102.368 30.71 163.788 40.948V731.93s40.948 10.237 81.895 10.237c30.71 0 56.302-5.118 56.302-5.118V598.853H512c138.197 0 266.157-20.474 368.525-51.184-15.355-40.947-30.71-76.776-51.184-117.723z"
                        fill="#DB2920"
                        p-id="7169"
                      ></path>
                      <path
                        d="M450.58 184.262c-15.356 0-25.593 15.356-25.593 30.71s10.237 30.711 25.592 30.711 25.592-15.355 25.592-30.71c-5.118-15.355-15.355-30.71-25.592-30.71z m179.143 20.474s-10.237-10.237-35.829-10.237c-25.592 5.119-35.828 15.355-35.828 20.474 0 0-5.119 10.237 0 15.355 5.118 5.118 10.236-5.118 10.236-5.118s10.237-15.356 25.592-15.356 25.592 5.119 25.592 5.119 5.119 5.118 10.237 0 0-10.237 0-10.237z"
                        fill="#040000"
                        p-id="7170"
                      ></path></svg
                    >QQ</a
                  >
                </li>
              </ul>
              <div class="text-muted text-center">
                没有账号? <router-link to="/register">立即注册</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 登录组件结束 -->
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    qLogin() {
      this.$message({
        message: "开发中",
        type: "warning",
      });
    },
    wLogin() {
      this.$message({
        message: "开发中",
        type: "warning",
      });
    },
    async login() {
      const isValid = await this.$validator.validateAll();
      if (isValid) {
        const res = await this.$store.dispatch("user/login", {
          username: this.username,
          password: this.password,
        });
        console.log('-----',res)
        if (res.code == 200) {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push("/");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请检查输入",
          type: "warning",
        });
      }
    },
  },
  mounted() {
  },
};
</script>

<style>
</style>